<template>
	<view class="page">
		<!-- 服务列表 -->
		<view class="service-list">
			<!-- 服务卡片1 -->
			<view class="service-card" v-for="(item, index) in serviceList" :key="index">
				<view class="card-footer">
					<view class="price-row">
						<text class="price-label">合同：</text>
						<text class="price-label">{{ item.name }}</text>
					</view>
					<button class="pay-btn" style="background-color: #f7931e;" @tap="contractSign(item.url)">{{
						item.status==1 ? '去签署' : '去查看'
					}}</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		pay
	} from '@/common/pay.js';
	export default {
		data() {
			return {
				loading: true,
				order_id: "",
				serviceList: []
			}
		},
		onLoad(e) {
			let self = this;
			self.loading = true;
			console.log(e)
			self.order_id = e.order_id
			self._get('user.order/orderContract', {
					order_id: self.order_id
				},
				function(res) {
					self.loading = false;
					console.log(res)
					self.serviceList = res.data
				})
		},
		methods: {
			contractSign(url) {
				window.open(url)
				// my.ap.openURL({
				// 	url: url,
				// 	success: (res) => {
				// 		console.log('openURL success', res)
				// 	},
				// 	fail: (err) => {
				// 		console.log('openURL success', err)
				// 	}
				// });
			}
		}
	}
</script>

<style>
	/* 全局样式 */
	page {
		background-color: #f7f7f7;
		height: 100%;
	}

	/* 页面容器 */
	.page {
		padding: 0;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}

	/* 标题样式 */
	.page-title {
		font-size: 18px;
		font-weight: bold;
		color: #000;
		text-align: center;
		padding: 15px 0;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	/* 服务列表 */
	.service-list {
		padding: 15px;
	}

	/* 服务卡片 */
	.service-card {
		margin-bottom: 15px;
		padding: 15px;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	/* 时间行 */
	.time-row {
		font-size: 14px;
		color: #999;
		margin-bottom: 12px;
	}

	.time-label {
		margin-right: 5px;
	}

	/* 分割线 */
	.divider {
		height: 1px;
		background-color: #f0f0f0;
		margin: 12px 0;
	}

	/* 服务名称 */
	.service-name {
		font-size: 16px;
		color: #333;
		margin-bottom: 15px;
		line-height: 1.4;
	}

	/* 卡片底部 */
	.card-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	/* 价格行 */
	.price-row {
		font-size: 16px;
		display: flex;
		align-items: center;
	}

	.price-label {
		color: #666;
	}

	.price-value {
		color: #f00;
		font-weight: bold;
		margin-left: 5px;
	}

	/* 支付按钮 */
	.pay-btn {
		width: 100px;
		height: 36px;
		line-height: 36px;
		background-color: #1677ff;
		color: #fff;
		border-radius: 30px;
		font-size: 14px;
		text-align: center;
		border: none;
		margin: 0;
		padding: 0;
	}

	/* 去除按钮默认边框 */
	button::after {
		border: none;
	}
</style>